<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>监管单位</title>
  <script type="text/javascript" type='module' charset="UTF-8" src="/js/collection.js"></script>
  <link rel="stylesheet" type="text/css" href="./unit.css">
  </link>
</head>

<body>
  <div id="app">
    <div class="unit-content">
      <div class="unit-left">
        <div class="rk-aside-tree-wrapper">
          <div class="aside-tree-item">
            <div class="tree-item-search panel-header-graduabg-color">
              <div class="item-search-title">
                <span>区划</span>
              </div>
              <div class="item-search-content">
                <el-input v-model="filterText" placeholder="请输入关键词" prefix-icon="search" clearable />
              </div>
            </div>
            <div class="tree-item-content" v-loading="loading">
              <div class="tree-item-content-center">
                <el-tree ref="adTreeRef" class="filter-tree" style="height: 100%;" v-loading="loading"
                  default-expand-all :current-node-key="currentNodeKey" :data="adTreeData" :props="treeProps"
                  highlight-current :default-expanded-keys="defaultExpandedKeys" :filter-node-method="filterNode"
                  @node-click="handleNodeClick"></el-tree>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="unit-right">
        <vxe-grid v-bind="gridOptions">
          <template #toolbar_tools>
            <el-button @click="handleSearch">查询</el-button>
          </template>
          <template #toolbar_buttons>
            <el-input v-model="unitParams.keyWords" placeholder="请输入单位名称或者统一社会信用代码" style="width: 300px"
              clearable></el-input>
            <el-select v-model="unitParams.supervise" style="margin: 0 15px; width: 200px" placeholder="请选择">
              <el-option v-for="item in unitOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </template>
          <template #operation="{ row }">
            <div>
              <el-button type="primary" link @click.stop="handleOperation(row)">查看该单位的银行账户列表
              </el-button>
            </div>
          </template>
        </vxe-grid>
      </div>
    </div>
  </div>
</body>
<script type="module" setup>
  const { createApp, ref, reactive, watch, onMounted, toRaw } = Vue
  const app = createApp({
    setup() {
      const defaultParams = {
        keyWords: undefined,
        supervise: 0,
        adcode: undefined
      }
      const unitParams = reactive({
        ...defaultParams
      })
      const unitOptions = ref([
        {
          label: '全部',
          value: 0
        },
        {
          label: '取消监管',
          value: 1
        },
        {
          label: '纳入监管',
          value: 2
        }
      ])

      const loading = ref(false)
      const filterText = ref('')
      const adTreeRef = ref()
      let currentNodeKey = ref('')
      let defaultExpandedKeys = reactive([])
      const adTreeData = [
        {
          id: 1,
          code: 21,
          id: "BF645336C04F45019F415011A3E6518E",
          leaf: false,
          levelno: 2,
          name: "1132省",
          parentId: null,
          text: "21 1132省",
          children: [
            {
              childNum: 0,
              children: [],
              code: "2100",
              id: "D2136069CBC34855AA80F7BAF0E2DC7E",
              leaf: false,
              levelno: 3,
              name: "省本级",
              parentId: "BF645336C04F45019F415011A3E6518E",
              text: "2100 省本级"
            },
            {
              childNum: 1,
              children: [{
                childNum: 0,
                children: [],
                code: "210100",
                id: "0320F0A0DE284F35A42E36C6C4C27BBC",
                leaf: false,
                levelno: 4,
                name: "3212市本级",
                parentId: "BF06E27857EF413E8CCA71290EA1367A",
                text: "210100 3212市本级"
              }],
              code: "2101",
              id: "BF06E27857EF413E8CCA71290EA1367A",
              leaf: false,
              levelno: 3,
              name: "3212市",
              parentId: "BF645336C04F45019F415011A3E6518E",
              text: "2101 3212市"
            },
          ],
        },
      ]

      const defaultProps = {
        children: 'children',
        label: 'label',
      }

      watch(filterText, (val) => {
        adTreeRef.value.filter(val)
      })
      const treeProps = {
        label: 'text',
        value: 'code',
        children: 'children'
      }
      const filterNode = (value, data) => {
        if (!value) return true
        const key = treeProps.label
        return data[key].includes(value)
      }

      onMounted(async () => {
        await getTreeData()
        watch(() => currentNodeKey, (value) => {
          if (value) {// 存在
            handleDefaultChecked(value)
          } else {
            handleDefaultChecked('first')
          }
          console.log('type')
        }, { deep: true, immediate: true })
      })

      /**获取树结构 */
      const getTreeData = async (param) => {
        // loading.value = true
        // const result = await zqlxZjtxlyTreeList(param)
        // const { data, code, msg } = result
        // if (code === 200) {
        //   adTreeData.value = data
        //   loading.value = false
        // } else {
        //   console.error(msg)
        //   loading.value = false
        // }
      }
      /**默认选中 */
      const handleDefaultChecked = (type) => {
        let dataArray = []
        dataArray = toRaw(adTreeData.value)
        if (type === 'first') {
          if (dataArray.length) {
            const firstNode = dataArray[0]
            const code = String(dataArray[0].code)
            currentNodeKey.value = code
            defaultExpandedKeys = [code]
            handleNodeClick(firstNode)
          } else {
            dataArray.forEach(element => {
              const code = String(element.code)
              if (code === currentNodeKey) {
                const selectRow = element
                defaultExpandedKeys = [code]
                handleNodeClick(selectRow)
              }
            })
          }
        }
      }

      /**树形选中 */
      const handleNodeClick = (data) => {
        const { id, code, name, parentId, leaf } = data
        console.log(id, code, name, parentId, leaf)
        // queryParams.agId = id
        // queryParams.adCode = code
        handleSearch()
      }
      //表格搜索数据
      const gridOptions = reactive({
        border: true,
        align: null,
        height: 'auto',
        columnConfig: {
          resizable: true
        },
        toolbarConfig: {
          slots: {
            buttons: 'toolbar_buttons',
            tools: 'toolbar_tools'
          }
        },
        rowConfig: {
          // 当鼠标移到行时，是否要高亮当前行
          isHover: true,
          // 当鼠标点击行时，是否要高亮当前行
          isCurrent: true
        },
        // 通用分页配置
        pagerConfig: {
          layouts: ['Sizes', 'PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'FullJump', 'Total'],
          border: true,
          pageSize: 20,
          pageSizes: [20, 50, 100, 200],
          background: true,
        },
        columns: [
          // { type: 'seq', width: 50, align: "center", fixed: "left", },
          { field: 'name', title: '单位代码', align: "center", width: 200 },
          { field: 'sex', title: '统一社会信用代码', align: "center", width: 300 },
          { field: 'address', title: '纳入 / 退出 监管时间', align: "center", width: 150 },
          { field: 'name', title: '监管状态', align: "center", width: 150 },
          { field: 'address', title: '操作', width: 200, fixed: "right", align: "center", slots: { default: "operation" } }
        ],
        data: [
          { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'Shenzhen' },
          { id: 10002, name: 'Test2', nickname: 'T2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
          { id: 10003, name: 'Test3', nickname: 'T3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
          { id: 10004, name: 'Test4', nickname: 'T4', role: 'Designer', sex: 'Women', age: 23, address: 'Shenzhen' },
          { id: 10005, name: 'Test5', nickname: 'T5', role: 'Develop', sex: 'Women', age: 30, address: 'Shanghai' },
          { id: 10006, name: 'Test6', nickname: 'T6', role: 'Designer', sex: 'Women', age: 21, address: 'Shenzhen' },
          { id: 10007, name: 'Test7', nickname: 'T7', role: 'Test', sex: 'Man', age: 29, address: 'Shenzhen' },
          { id: 10008, name: 'Test8', nickname: 'T8', role: 'Develop', sex: 'Man', age: 35, address: 'Shenzhen' },
          { id: 10004, name: 'Test4', nickname: 'T4', role: 'Designer', sex: 'Women', age: 23, address: 'Shenzhen' },
          { id: 10005, name: 'Test5', nickname: 'T5', role: 'Develop', sex: 'Women', age: 30, address: 'Shanghai' },
          { id: 10006, name: 'Test6', nickname: 'T6', role: 'Designer', sex: 'Women', age: 21, address: 'Shenzhen' },
          { id: 10007, name: 'Test7', nickname: 'T7', role: 'Test', sex: 'Man', age: 29, address: 'Shenzhen' },
          { id: 10008, name: 'Test8', nickname: 'T8', role: 'Develop', sex: 'Man', age: 35, address: 'Shenzhen' }
        ]
      })
      // 搜索
      const handleSearch = () => {
      }
      // 操作
      const handleOperation = (row) => {
        console.log(row)
      }

      return {
        unitOptions,
        loading,
        filterText,
        adTreeRef,
        defaultProps,
        currentNodeKey,
        defaultExpandedKeys,
        adTreeData,
        handleNodeClick,
        filterNode,
        treeProps,
        //表格
        unitParams,
        gridOptions,
        handleSearch,
        handleOperation
      }
    }

  })

  app.component('search', ElementPlusIconsVue.Search)
  app.use(ElementPlus);
  app.use(VXETable);
  app.mount('#app');

</script>

</html>